<template>
  <div class="tag-select">
    <tag-select-option @click="toggleCheck">全部</tag-select-option>
    <slot></slot>
    <a @click="toggle" v-show="showTrigger" ref="trigger" class="trigger">展开
      <a-icon style="margin-left: 5px" :type="collapsed ? 'down' : 'up'"/>
    </a>
  </div>
</template>

<script>
import TagSelectOption from './TagSelectOption'
export default {
  name: 'TagSelect',
  Option: TagSelectOption,
  components: { TagSelectOption },
  data() {
    return {
      showTrigger: false,
      collapsed: true,
      screenWidth: document.body.clientWidth,
      checkAll: false
    }
  },
  watch: {
    screenWidth: function () {
      this.showTrigger = this.needTrigger()
    },
    collapsed: function (val) {
      this.$el.style.maxHeight = val ? '39px' : '78px'
    }
  },
  mounted() {
    let _this = this
    // 此处延迟执行，是为解决mouted未完全完成情况下引发的trigger显示bug
    setTimeout(() => {
      _this.showTrigger = _this.needTrigger()
      _this.$refs.trigger.style.display = _this.showTrigger ? 'inline' : 'none'
    }, 1)
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        _this.screenWidth = window.screenWidth
      })()
    }
  },
  methods: {
    needTrigger() {
      return this.$el.clientHeight < this.$el.scrollHeight || this.$el.scrollHeight > 39
    },
    toggle() {
      this.collapsed = !this.collapsed
    },
    getAllTags() {
      const tagList = this.$children.filter((item) => {
        return item.isTagSelectOption
      })
      return tagList
    },
    toggleCheck() {
      this.checkAll = !this.checkAll
      const tagList = this.getAllTags()
      tagList.forEach((item) => {
        item.checked = this.checkAll
      })
    }
  }
}
</script>

<style lang="less" scoped>
.tag-select {
  user-select: none;
  position: relative;
  overflow: hidden;
  max-height: 39px;
  padding-right: 50px;
  display: inline-block;
}
.trigger {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
